<script setup>
</script>

<template>
  <header>
      <h1>欢迎来到我的学习笔记&copy;</h1>
    </header>
    <nav>
      &lt;!&ndash; 导航链接 &ndash;&gt;
      <a href="https://www.baidu.com">首页              </a>
      <a href="https://www.baidu.com">关于              </a>
      <a href="https://www.baidu.com">联系              </a>
      <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" class="mdn-link" target="_blank">MDN HTML文档</a>
    </nav>
    <main>
      <article>
        <section>
          &lt;!&ndash; 第一部分内容 &ndash;&gt;
          <h2>HTML简介</h2>
          <p><strong>HTML，全称为超文本标记语言（Hyper Text Markup Language），是构建和设计网页的基础标记语言。</strong>它使用一系列标签来定义网页内容的结构和含义，使得文本、图像、视频等多媒体内容能够在Web浏览器中呈现出来。<br/>
            HTML文档由一系列元素组成，这些元素通过<mark>标签</mark>来标记，从而告诉浏览器如何展示内容。</p>
          <p>一个典型的HTML文档包含<strong>html、head和body</strong>三个基本部分。<br/><em>html标签定义了整个文档的范围，head部分包含了文档的元数据，如标题title和链接到CSS样式表的link标签。body部分则包含了网页的所有可见内容，如文本、图片、视频和表单等。</em></p>
          <img src="https://picsum.photos/200/200?random=6" alt="旋转图片" style="width: 30%; height: 100%; object-fit: cover;">
        </section>
        <section>
          &lt;!&ndash; 第二部分内容 &ndash;&gt;

          <div class="order">
            <h2>知识点</h2>
            <ul>
              <li>标题元素：h1-h6创建内容层级</li>
              <li>段落元素：p定义文本段落</li>
              <li>换行与分隔：br强制换行，hr内容分隔线</li>
            </ul>
            <h2>步骤</h2>
            <ol>
            <li>掌握基础结构与常用标签</li>
            <li>学会使用语义化标签组织内容</li>
            <li>掌握表单与表格，并养成实践验证习惯</li>
          </ol>
            <dl>
              <h3>术语</h3>
              <dt>标签 (Tags)</dt>
              <dd>HTML文档的基本构建块，用尖括号 &lt;&gt; 括起来。标签定义了网页内容的结构和含义。例如：&lt;p&gt; 表示段落，&lt;h1&gt; 表示一级标题。</dd>

              <dt>元素 (Elements)</dt>
              <dd>由开始标签、内容和结束标签组成的完整结构。元素是HTML文档树状结构（DOM）中的节点。例如：&lt;a href="https://example.com"&gt;点击这里&lt;/a&gt; 是一个完整的链接元素。</dd>

              <dt>属性 (Attributes)</dt>
              <dd>提供关于HTML元素的附加信息或配置，总是写在开始标签内。例如：href属性定义链接的目标地址，src属性定义图像的来源。</dd>
            </dl>
          </div>

        </section>

        <aside>
          &lt;!&ndash; 补充信息 &ndash;&gt;
        </aside>
      </article>
      &lt;!&ndash; 表格 &ndash;&gt;
      <table>
        <thead>
        <tr>
          <th>HTML版本</th>
          <th>发布时间</th>
          <th>标准组织</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>HTML5</td>
          <td>2014年10月</td>
          <td>W3C</td>
        </tr>
        <tr>
          <td>HTML4.01</td>
          <td>1999年12月</td>
          <td>W3C</td>
        </tr>
        </tbody>
      </table>

    </main>
    <footer>
      &lt;!&ndash; 版权信息 &ndash;&gt;
    </footer>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
